<template>
<el-card shadow="never" class="aui-card--fill">
    <div class="mod-island-scenic__isscenicticket">
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-select v-model="dataForm.type" placeholder="时间范围选择" clearable>
                    <el-option v-for="item in times" :key="item.val" :label="item.label" :value="item.val">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="dataForm.scenicName" placeholder="所属区域" clearable>
                    <el-option v-for="item in scenicNameList" :key="item.scenicName" :label="item.scenicName" :value="item.scenicName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.scenicSpotName" placeholder="景区名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <ren-select v-model="dataForm.ticketType" dict-type="ticket_type" placeholder="请选择门票类型"></ren-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="dataForm.status" placeholder="请选择状态" clearable>
                    <el-option v-for="item in statesArr" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.linkName" placeholder="联系人" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="dataForm.linkMobile" placeholder="联系方式" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%" height="calc(100vh - 270px)">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
            <el-table-column prop="ticketName" label="票价名称" header-align="center" min-width="170px" fixed="left" align="center"></el-table-column>
            <el-table-column prop="scenicSpotName" label="景区名称" header-align="center" align="center" min-width="150px"></el-table-column>
            <el-table-column prop="scenicName" label="所属区域名称" header-align="center" min-width="150px" align="center"></el-table-column>
            <el-table-column prop="ticketType" label="门票类型" header-align="center" align="center">
                <template slot-scope="scope">
                    {{$getDictLabel('ticket_type',scope.row.ticketType)}}
                </template>
            </el-table-column>
            <el-table-column prop="orderCode" label="订单编号" header-align="center" align="center" min-width="180px"></el-table-column>
            <el-table-column prop="sailId" label="第三方订单id" header-align="center" min-width="150px" align="center"></el-table-column>
            <el-table-column prop="sailTicketId" label="第三方sailticket_id" header-align="center" min-width="150px" align="center"></el-table-column>

            <el-table-column prop="realName" label="游客姓名" header-align="center" align="center" min-width="150px"></el-table-column>
            <el-table-column prop="idCode" label="游客身份证" header-align="center" align="center" min-width="180px"></el-table-column>
            <el-table-column prop="gender" label="游客性别" header-align="center" align="center" min-width="180px">
                <template slot-scope="scoped">
                    {{scoped.row.gender==0?'男':'女'}}
                </template>
            </el-table-column>
            <el-table-column prop="age" label="游客年龄" header-align="center" align="center" min-width="180px"></el-table-column>
            <el-table-column prop="ticketPrice" label="门票单价" header-align="center" align="center"></el-table-column>
            <el-table-column prop="qty" label="数量" header-align="center" align="center"></el-table-column>
            <el-table-column prop="totalPrice" label="总价" header-align="center" align="center"></el-table-column>
            <el-table-column prop="playDate" label="游玩时间" min-width="170px" header-align="center" align="center"></el-table-column>
            <el-table-column prop="linkName" label="联系人姓名" min-width="150px" header-align="center" align="center"></el-table-column>
            <el-table-column prop="linkMobile" label="联系人电话" min-width="150px" header-align="center" align="center"></el-table-column>
            <!-- <el-table-column prop="status" label="状态" header-align="center" align="center" fixed="right" min-width="120px">
                <template slot-scope="scope">
                    <span :style="{'background':statusColor[scope.row.status]}" class="status">
                        {{states[scope.row.status]}}
                    </span>

                </template>
            </el-table-column> -->
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
        </el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
    </div>
</el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
export default {
    mixins: [mixinViewModule],
    data() {
        return {
            ticketTypeOptions: {
                '1': "成人票",
                '2': "优惠票",
                '3': "儿童票"
            },
            statesArr: [{
                    dictValue: 0,
                    dictLabel: "待支付"
                },
                {
                    dictValue: 1,
                    dictLabel: "待使用"
                },
                {
                    dictValue: 2,
                    dictLabel: "已使用"
                },
                {
                    dictValue: 3,
                    dictLabel: "退票中"
                },
                {
                    dictValue: 4,
                    dictLabel: "已退票"
                },
            ],
            states: {
                '0': "待支付",
                '1': "待使用",
                '2': "已使用",
                '3': "退票中",
                '4': "退票中"
            },
            statusColor: {
                '0': '#FF4141',
                '1': '#409EFF',
                '2': '#CCCCCC',
                '3': '#FF9C3D',
                '4': '#AAAAAA'
            },
            mixinViewModuleOptions: {
                getDataListURL: "/scenic/scenic-order/selectScenicTouristPage",
                getDataListIsPage: true,
            },
            dataForm: {
                scenicName: '',
                scenicSpotName: '',
                status: '',
                ticketType: '',
                type: ''
            },
            times: [{
                val: 'day',
                label: '当天'
            }, {
                val: 'week',
                label: '本周'
            }, {
                val: 'month',
                label: '本月'
            }],
            scenicNameList: [],
            scenicSpotNameList: [],
        };
    },
    watch: {
        "dataForm.scenicName"(newval, oldval) {
            if (newval != oldval) {
                this.getScenicSpotNameList();
            }

        }
    },
    components: {},
    created() {
        this.getScenicName();
    },
    methods: {
        getScenicName() {
            this.$http.get('/scenic/isscenic/selectScenicList').then(res => {
                this.scenicNameList = res.data.data;
            })
        },
        getScenicSpotNameList() {
            var id = "";
            let itemval = this.scenicNameList.filter((item) => item.scenicName == this.dataForm.scenicName);
            if (itemval) {
                id = itemval[0].id;
            }
            this.$http.get('/scenic/isscenicspot/selectScenicList/' + id).then(res => {
                this.scenicSpotNameList = res.data.data
            })
        }
    },
};
</script>

<style scoped>
.status {
    display: inline-block;
    width: 68px;
    text-align: center;
    height: 28px;
    line-height: 28px;
    border-radius: 3px;
    font-size: 12px;
    color: #fff
}
</style>
